<template>
  <div class="home-container">
    <Sidebar @select="handleSelect" />
    <main class="main-content">
      <button @click="confirmLogout" class="logout-button">登出</button>

      <div v-if="currentPage === 'users'">
        <UserManagement
            :current-page-number="currentPageNumber"
            :page-size="pageSize"
            @update:currentPageNumber="handlePageChange"
        />
      </div>

      <div v-if="currentPage === 'vehicles'">
        <VehicleManagement
            :current-page-number="currentPageNumber"
            :page-size="pageSize"
            @update:currentPageNumber="handlePageChange"
        />
      </div>

      <div v-if="currentPage === 'appointments'">
        <AppointmentManagement
            :current-page-number="currentPageNumber"
            :page-size="pageSize"
            @update:currentPageNumber="handlePageChange"
        />
      </div>

      <div v-if="currentPage === 'reviews'">
        <ReviewManagement
            :current-page-number="currentPageNumber"
            :page-size="pageSize"
            @update:currentPageNumber="handlePageChange"
        />
      </div>
      <div v-if="currentPage === 'orders'">
        <OrderManagement
            :current-page-number="currentPageNumber"
            :page-size="pageSize"
            @update:currentPageNumber="handlePageChange"
        />
      </div>
      <!-- 新增车辆订单管理模块 -->
      <div v-if="currentPage === 'ProductsOrders'">
        <ProductsOrdersManagement
            :current-page-number="currentPageNumber"
            :page-size="pageSize"
            @update:currentPageNumber="handlePageChange"
        />
      </div>
    </main>
  </div>
</template>

<script>
import { onMounted, ref, computed } from 'vue';
import { useAuthStore } from '@/stores/auth';
import { useRouter } from 'vue-router';
import Sidebar from '@/components/Sidebar.vue';
import UserManagement from '@/components/User.vue';
import VehicleManagement from "@/components/VehicleManagement.vue"; // 引入车辆管理组件
import AppointmentManagement from '@/components/AppointmentManagement.vue';
import ReviewManagement from "@/components/ReviewManagement.vue";
import OrderManagement from "@/components/OrderManagement.vue"; // 引入预约管理组件
import ProductsOrdersManagement from '@/components/ProductsOrdersManagement.vue'; // 引入新的组件
export default {
  components: {
    OrderManagement,
    ReviewManagement,
    AppointmentManagement,
    Sidebar,
    UserManagement,
    VehicleManagement, // 添加车辆管理组件
    ProductsOrdersManagement
  },
  setup() {
    const authStore = useAuthStore();
    const router = useRouter();
    const currentPage = ref('vehicles'); // 默认显示用户管理页面
    const currentPageNumber = ref(1); // 当前页码
    const pageSize = 10; // 每页显示的条目数量

    // 获取用户名
    const username = computed(() => authStore.user?.username || 'Guest');

    onMounted(() => {
      if (!authStore.isAuthenticated) {
        router.push('/'); // 没有 token，跳转回登录页
      }
    });

    const handleSelect = (page) => {
      currentPage.value = page; // 切换页面
      currentPageNumber.value = 1; // 切换页面时重置为第一页
    };

    const confirmLogout = () => {
      if (confirm('Are you sure you want to log out?')) {
        logout();
      }
    };

    const logout = () => {
      authStore.logout(); // 调用 Pinia 中的登出方法
      router.push('/'); // 重定向到登录页面
    };

    const handlePageChange = (newPage) => {
      currentPageNumber.value = newPage; // 更新当前页码
    };

    return {
      currentPage,
      currentPageNumber,
      pageSize,
      username,
      handleSelect,
      confirmLogout,
      logout,
      handlePageChange,
    };
  },
};
</script>

<style scoped>
.home-container {
  display: flex;
  height: 100vh;
}

.logout-button {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 10px 15px;
  background-color: #e74c3c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.logout-button:hover {
  background-color: #c0392b;
}

.main-content {
  flex: 1;
  padding: 20px;
  position: relative;
  text-align: center;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

table th,
table td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
}

.pagination {
  margin-top: 20px;
}
</style>
